<template>
  <div class="carousel-table">
    <!-- 列名部分 -->
    <div class="table-header">
      <div class="header-item">姓名</div>
      <div class="header-item">重量</div>
      <div class="header-item">单价</div>
      <div class="header-date">下单时间</div>
    </div>

    <!-- 表格部分 -->
    <table>
      <tbody>
        <!-- 使用 v-for 来循环显示可见的行 -->
        <tr
          v-for="(row, index) in orderlist"
          :key="index"
          :class="{ 'odd-row': index % 2 === 0, 'even-row': index % 2 !== 0 }"
        >
          <td class="row-item">
            {{ formatCustomerName(row.customerName) }}
          </td>
          <td class="row-item">{{ row.weight }}</td>
          <td class="row-item">
            <span v-if="row.price && row.price.settlePrice">{{
              row.price.settlePrice
            }}</span>
            <span v-else>-</span>
            <!-- 如果没有价格则显示 "-" -->
          </td>
          <td class="row-date">{{ row.createdTime }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  computed: mapState({
    orderlist: function (state) {
      return state.data.orderData.lastOrders;
    },
  }),
  watch: {
    // 监听 `orderlist` 的变化
    orderlist(newVal, oldVal) {
      console.log("Order list changed:", newVal);
      // 在这里执行你需要的逻辑，如数据变化时的处理
      this.handleOrderListChange(newVal, oldVal);
    },
  },
  methods: {
    // 格式化客户名称的方法
    formatCustomerName(name) {
      if (!name) return ""; // 防止 null 或 undefined
      return name.slice(0, 1) + "*".repeat(name.length - 1); // 替换后面的字符为 *
    },
    // 数据变化时的处理函数
    handleOrderListChange(newList, oldList) {
      // 在这里做一些响应，比如重新排序、发出提示、或者更新其他组件
      console.log("Order list updated from", oldList, "to", newList);
      // 可以在此处添加额外的处理代码，比如分页、筛选等
    },
  },
};
</script>

<style scoped>
/* 容器样式 */
.carousel-table {
  width: 100%;
  overflow: hidden;
  padding-top: 10px; /* 留出空间用于列名称 */
}

/* 列名称部分 */
.table-header {
  display: flex;
  justify-content: space-around; /* 平均分配列名称 */
  margin-bottom: 10px; /* 与表格之间的间距 */
}

.header-item {
  font-weight: bold;
  width: 70px; /* 设定列名的宽度 */
  text-align: center;
  padding: 10px;
}
.header-date {
  font-weight: bold;
  width: 150px; /* 设定列名的宽度 */
  text-align: center;
  padding: 10px;
}

.row-item {
  width: 70px; /* 设定列名的宽度 */
  font-size: 0.3em;
  text-align: center;
}
.row-date {
  width: 150px; /* 设定列名的宽度 */
  font-size: 0.3em;
  text-align: center;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: center;
}

/* 设置背景颜色 */
.odd-row {
  background-color: #1a1a1a; /* 偶数行背景色 */
}

.even-row {
  background-color: #050505; /* 奇数行背景色 */
}
</style>
